<template>
  <div>
    <div class="ddtop">
      <p>已使用{{ detailinfo.surplus }}次 / 共{{ detailinfo.num }}次</p>
      <p>有效日期 : {{ detailinfo.closingdate }}</p>
    </div>
    <div class="ddcontent2">
      <div class="ddimg">
        <img :src="detailinfo.imagepath" width="100%" />
      </div>

      <div class="ddinfo">
        <p>{{ detailinfo.itemname }}</p>
        <p>{{ detailinfo.specsname }}</p>
      </div>
      <div style="width:30%">
        <span class="moneyinfo" style="color:#333">￥ {{ detailinfo.amount }}</span>
      </div>
    </div>
    <div id="qrcode" class="qrcode2" v-if="detailinfo.usedend=='false'" />
    <div class="score">
      <p style="font-weight:bold;color:#333;padding:10px 0">消费记录</p>
      <div v-for="(item, index) in usescore" :key="index" class="scorediv">
        <p>
          <span>门店</span>
          <span>{{ item.sname }}</span>
        </p>
        <p>
          <span>时间</span>
          <span>{{ item.systime }}</span>
        </p>
      </div>
      <p v-if="usescore.length==0" style="text-align:center">暂无记录</p>
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
export default {
  layout: 'default2',
  data() {
    return {
      ts: this.newStore(),
      detailinfo: {},
      usescore: [],
      uselist: [],
      qrcodetext: ''
    }
  },
  created() {
    this.getdetailinfo()
  },
  methods: {
    getdetailinfo() {
      this.detailinfo = {}
      this.usescore = []
      const req = {
        token: localStorage.getItem('token'),
        orderno: this.$route.query.orderno
      }
      this.spost(this.ts, '/Orderc/orderDetail', req).then(ts => {
        this.usescore = ts.d.data.uselist
        this.detailinfo = ts.d.data.order
        let time = ts.d.data.order.nowtime
        let ordernum = ts.d.data.order.orderno
        let ordertoken = ts.d.data.order.ordertoken

        this.qrcodetext =
          'http://vipcard.eke88.com/ddpage3?word=验证消费' +
          '&nowtime=' +
          time +
          '&orderno=' +
          ordernum +
          '&ordertoken=' +
          ordertoken
        console.log(this.qrcodetext)

        setTimeout(() => {
          this.qrcode()
        }, 100)
      })
    },
    qrcode() {
      let qrcode = new QRCode('qrcode', {
        width: 200,
        height: 200,
        text: this.qrcodetext, // 二维码地址
        colorDark: '#000',
        colorLight: '#fff'
      })
    }
  }
}
</script>

<style socped>
.score {
  padding: 20px 5%;
}
.ddtop {
  height: 150px;
  width: 100%;
  background: #00b2a3;
  position: relative;
}
.ddtop p {
  color: #fff;
  line-height: 50px;
  text-align: center;
  padding-bottom: 0;
}
.ddtop p:first-child {
  font-size: 20px;
}
.scorediv {
  border-bottom: 1px solid #f1f1f1;
  padding: 15px 0;
}
.scorediv p {
  display: flex;
  justify-content: space-between;
  color: #333;
}
.ddcontent2 {
  display: flex;
  justify-content: space-between;
  width: 90%;
  margin: 0 auto;
  background: #f8f8f8;
  padding: 20px;
  position: absolute;
  top: 160px;
  left: 5%;
  border-radius: 5px;
}
.ddcontent:first-child {
  margin-top: 0;
}
.qrcode2 {
  background: #f8f8f8;
  display: flex;
  margin-top: 80px;
  justify-content: center;
  padding: 20px 0;
  width: 90%;
  margin-left: 5%;
  /* width: 90%;
  margin-left: 5%;
  margin-top: 80px;
  padding: 20px;
  border-radius: 5px; */
}
.ddimg {
  width: 24%;
}
.ddinfo {
  width: 60%;
  padding: 0 10px;
}
.ddinfo p:first-child {
  color: #333;
  line-height: 18px;
}
.money {
  padding: 15px 0;
  padding-bottom: 6px;
  text-align: right;
  color: #333;
}
.moneyinfo {
  text-align: right;
  display: inline-block;
  width: 100%;
  color: rgb(143, 143, 148);
  line-height: 18px;
}
</style>
